import React from 'react';
import ajax from 'superagent';

import TabTitle from '../../components/tabTitle/TabTitle';
import Video from '../../components/video/Video';

class MainVideo extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'MainVideo';
        this.state = {
            videomode: 0,
            videosLive: [],
            historicVideos: []
        }
    }

    fetchingData(  ) {
        ajax.get(`api/videos/get/`)
            .end((error, response) => {
                if( !error && response ) {
                    let data = response.body;
                    console.log(data);

                    // 将有关 正在直播 视频的数据 转成 需要的格式

                    let videosLive = [];

                    data.get_live_videos.map(function( video, index ){
                        videosLive.push({
                            id: video.id,
                            club1: {
                                logo: video.team_1_image,
                                name: video.team_1_name,
                            },
                            club2: {
                                logo: video.team_2_image,
                                name: video.team_2_name,
                            },
                            time: {
                                // datetime: video.get_time
                                datetime: video.get_time.slice(0, 5)
                            },
                            links: [
                                video.video_url_1,
                                video.video_url_2,
                                video.video_url_3,
                                video.video_url_4
                            ]
                        })
                    });

                    // 将 历史精彩视频 整理成需要的格式
                    let historicVideos = [];
                    data.get_historic_videos.map(( video, index ) => {

                        historicVideos.push({
                            // title:
                            // sub:
                            // iframe:
                        })

                    });

                    this.setState({
                        videosLive: videosLive,
                        historicVideos: historicVideos
                    });

                } else {
                    console.error(`Error fetching ${name} `, error);
             }
        });
    }


    onHandleVideoChange (newMode) {
        this.setState({
            videomode: newMode
        });
    }


    componentWillMount(){
        this.fetchingData();
    }

    render() {

        return (
            <div className="mainvideo">
                <TabTitle mode="video" onHandleVideoChange={this.onHandleVideoChange.bind(this)
}/>
                <Video mode={this.state.videomode} live = { this.state.videosLive } history = {this.state.historicVideos}  />
            </div>

        )
    }
}

export default MainVideo;
